import { useEffect, useLayoutEffect, useRef, useState } from 'react';

// 参考 https://4x.ant.design/components/grid-cn/#components-grid-demo-responsive
export const breakpoints = {
  xs: 576,
  sm: 768,
  md: 992,
  lg: 1200,
  xl: 1440, // 你可以根据需要添加更多的断点
};

/**
 * 监听侧边栏宽度变化
 */
export const useResizeSidebarWidth = () => {
  const [resizeSidebarWidth, setResizeSidebarWidth] = useState<any>(window.innerWidth); // 侧边栏宽度
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState<boolean>(false); // 侧边栏是否收起
  const roRef = useRef<any>();

  /**
   * 监听侧边栏宽度变化
   */
  const resizeUpdate = () => {
    const sidebarElement = document.querySelector('aside.ant-layout-sider');
    if (sidebarElement) {
      if (!roRef.current) {
        roRef.current = {};
      }
      roRef.current.container = new ResizeObserver((entries) => {
        for (const entry of entries) {
          const cr = entry.contentRect;
          setResizeSidebarWidth(cr.width);
        }
      });
      roRef.current.container.observe(sidebarElement as HTMLElement);

      roRef.current.el = sidebarElement;
      const isCollapsed = sidebarElement.classList.contains('collapsed');
      setIsSidebarCollapsed(isCollapsed);
    }
  };

  useLayoutEffect(() => {
    resizeUpdate();
    return () => {
      if (roRef.current) {
        roRef.current.container.unobserve(roRef.current.el);
        roRef.current = null;
      }
    };
  }, [document.querySelector('aside.ant-layout-sider')]);

  return {
    resizeSidebarWidth,
    isSidebarCollapsed, // 返回侧边栏状态
  };
};
/**
 * 监听窗口宽度变化
 */
export const useResizeWinWidth = () => {
  const [resizeWinWidth, setResizeWinWidth] = useState<any>(window.innerWidth); // 窗口宽度
  const resizeUpdate = () => {
    const w = window.innerWidth;
    setResizeWinWidth(w);
  };

  useEffect(() => {
    resizeUpdate();
    window.addEventListener('resize', resizeUpdate);
    return () => {
      window.removeEventListener('resize', resizeUpdate);
    };
  }, []);

  return {
    resizeWinWidth,
  };
};
/**
 * 监听窗口宽度变化，不包含侧边栏宽度
 */
export const useResizeWidthWithoutSidebar = () => {
  const { resizeWinWidth } = useResizeWinWidth();
  const { resizeSidebarWidth } = useResizeSidebarWidth();
  const [resizeWidthWithoutSidebar, setResizeWidthWithoutSidebar] = useState<number>(
    resizeWinWidth - resizeSidebarWidth,
  );

  useEffect(() => {
    setResizeWidthWithoutSidebar(resizeWinWidth - resizeSidebarWidth);
  }, [resizeWinWidth, resizeSidebarWidth]);

  return {
    resizeWinWidth,
    resizeSidebarWidth,
    resizeWidthWithoutSidebar,
  };
};
/**
 * 获取当前窗口的响应式类名
 */
export const useResponsiveClass = () => {
  const [responsiveClass, setResponsiveClass] = useState<string>(''); // 存储响应式类名
  const resizeObj = useResizeWidthWithoutSidebar();
  const updateResponsiveClass = () => {
    const width = resizeObj.resizeWidthWithoutSidebar;
    let className = '';

    if (width < breakpoints.xs) {
      className = 'xs';
    } else if (width >= breakpoints.xs && width < breakpoints.sm) {
      className = 'sm';
    } else if (width >= breakpoints.sm && width < breakpoints.md) {
      className = 'md';
    } else if (width >= breakpoints.md && width < breakpoints.lg) {
      className = 'lg';
    } else {
      className = 'xl';
    }

    setResponsiveClass(className);
  };

  useEffect(() => {
    updateResponsiveClass();
  }, [resizeObj.resizeWidthWithoutSidebar]);

  return responsiveClass;
};
